import 'package:study_online/utils/myBoxAnimation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screen_util.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black26,
          title: Text('container'),
        ),
        body: StudyPageSkeleton(),
      ),
    );
  }
}

class StudyPageSkeleton extends StatefulWidget {
  final bool isCircularImage;
  final bool isBottomLinesActive;

  StudyPageSkeleton(
      {this.isCircularImage = true, this.isBottomLinesActive = true});

  @override
  _StudyPageSkeletonState createState() => _StudyPageSkeletonState();
}

class _StudyPageSkeletonState extends State<StudyPageSkeleton>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    );
    animation = Tween<double>(begin: -1.0, end: 2.0).animate(
        CurvedAnimation(curve: Curves.easeInOutSine, parent: _controller));

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed ||
          status == AnimationStatus.dismissed) {
        _controller.repeat();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(
      BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width,
          maxHeight: MediaQuery.of(context).size.height),
      designSize: Size(1080, 2340),
    );
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return Container(
          color: Colors.white,
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: ScreenUtil().screenWidth - 2 * ScreenUtil().setWidth(52),
                  height: ScreenUtil().setHeight(372),
                  margin: EdgeInsets.fromLTRB(ScreenUtil().setWidth(52),
                      ScreenUtil().setHeight(36), ScreenUtil().setWidth(52), 0),
                  decoration: myBoxDec(animation),
                ),
                Container(
                  width: ScreenUtil().screenWidth - 2 * ScreenUtil().setWidth(52),
                  height: ScreenUtil().setHeight(372),
                  margin: EdgeInsets.fromLTRB(ScreenUtil().setWidth(52),
                      ScreenUtil().setHeight(36), ScreenUtil().setWidth(52), 0),
                  decoration: myBoxDec(animation),
                ),
                Container(
                  width: ScreenUtil().screenWidth - 2 * ScreenUtil().setWidth(52),
                  height: ScreenUtil().setHeight(372),
                  margin: EdgeInsets.fromLTRB(ScreenUtil().setWidth(52),
                      ScreenUtil().setHeight(36), ScreenUtil().setWidth(52), 0),
                  decoration: myBoxDec(animation),
                ),
                Container(
                  width: ScreenUtil().screenWidth - 2 * ScreenUtil().setWidth(52),
                  height: ScreenUtil().setHeight(372),
                  margin: EdgeInsets.fromLTRB(ScreenUtil().setWidth(52),
                      ScreenUtil().setHeight(36), ScreenUtil().setWidth(52), 0),
                  decoration: myBoxDec(animation),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
